<template>
  <el-container class="app-container">
    <el-row class="">
      <el-page-header @back="$router.back()" content="合同详情" class="fl"></el-page-header>
      <!--<el-row class="fr">
        <el-button size="medium" type="primary" @click="editBtnClick('change')">变更</el-button>
        <el-button size="medium" type="primary" @click="editBtnClick('carry')">结转</el-button>
        <el-button size="medium" type="primary" @click="editBtnClick('renewal')">续租</el-button>
        <el-button size="medium" type="warning" @click="editBtnClick('leaseback')">退租</el-button>
        <el-button size="medium" type="danger" @click="editBtnClick('tovoid')">作废</el-button>
        <el-button size="medium" type="" @click="editBtnClick('opeRecord')">操作记录</el-button>
      </el-row>-->
    </el-row>

    <!--表格-->
    <el-card class="box-card m-t-10">
      <div slot="header" class="clearfix  box-card-h">
        <span><span>{{room.areaName}}  {{room.buildingNo}}幢/ {{room.buildingFloor}}楼/ {{room.roomNo}}室</span></span>
      </div>
      <div>
        <el-row class="p-style">
          <el-col :span="12">
            <p>合同编号：{{contract.contractNo}}</p>
            <p>状态： {{{'1':'正常执行','0':'未执行','3':'已过期'}[contract.status]}}</p>
            <p>租户主体：<router-link to="">{{contract.lesseeName}}</router-link></p>
            <p>跟进人： {{contract.followerName}}</p>
            <p>租赁面积（㎡）： {{contract.measureArea}}</p>
            <p>合同标签：
              <el-tag
                class="tags"
                v-for="(item,i) in contract.labelIds || []"
                :key="i"
                :type="success"
                effect="dark">
                {{ item.labelName }}
              </el-tag>
            </p>
            <p>合同备注：{{contract.remark?contract.remark:'无'}}</p>
          </el-col>
          <el-col :span="12">
            <p>合同签订日：{{contract.signDate}}</p>
            <p>合同计租日：{{contract.rentalDate}}</p>
            <p>合同结束日：{{contract.rentalDueDate}}</p>
            <p>实时单价：{{contract.timelyPrice}} {{{1:'元/㎡/天',2:'元/月'}[contract.timelyPriceUnit]}}</p>
            <p>合同单价：{{contract.contractPrice}} {{{1:'元/㎡/天',2:'元/月'}[contract.timelyPriceUnit]}}</p>
          </el-col>
        </el-row>
      </div>
    </el-card>


    <el-card class="box-card">
      <div slot="header" class="clearfix  box-card-h">
        <span>保证金（合计：{{securityFee?securityFee.fee:0}}元）</span>
      </div>
      <table-view
        :columns="tableContentbzj"
        :pageList="columnDatabzj"
      >
      </table-view>
    </el-card>


    <el-card class="box-card">
      <div slot="header" class="clearfix box-card-h">
        <span>租金（合计：{{rentalFee.total}}元）</span>
      </div>
      <table-view
        :columns="tableContentzj"
        :pageList="columnDatazj"
      >
      </table-view>
    </el-card>


    <el-card class="box-card">
      <div slot="header" class="clearfix  box-card-h">
        <span>物业费</span>
      </div>
      <table-view
        :columns="tableContentwyf"
        :pageList="columnDatawyf"
      >
      </table-view>
    </el-card>
    <el-footer></el-footer>
  </el-container>
</template>

<script>
  import TableView from '@/components/TableView'
  import * as pageApi from '@/api/spaceBusiness/houseManage/contract'


  export default {
    name: 'list',
    components: {
      TableView,
    },
    data() {
      return {
        spaceOptions:[],
        zsOptions:[{label:'全部',value:''},{label:'可招商',value:'1'},{label:'不可招商',value:'0'}],
        zxOptions:[{label:'全部',value:''},{label:'装修',value:'1'},{label:'简装',value:'2'},{label:'毛坯',value:'3'},{label:'其他',value:'4'}],
        dialogTitle: '添加',
        dialogVisible: false,
        dialogType: 'add',
        tableContentbzj:[{
          field: 'fee',
          label: '保证金'
        }, {
          field: 'intro',
          label: '付款状态',
        }, {
          field: 'intro',
          label: '付款日期',
        }, {
          field: 'intro',
          label: '保证金备注',
        }],
        tableContentzj:[{
          field: 'periods',
          label: '期数'
        }, {
          field: 'startDate',
          label: '开始日期'
        }, {
          field: 'endDate',
          label: '结束时间',
        }, {
          field: 'fee',
          label: '租金'
        }, {
          field: 'payDeadline',
          label: ' 付款要求'
        },{
          field: 'paymentCycle',
          label: '付款周期'
        }, {
          field: 'paymentStatus',
          label: '付款状态'
        }, {
          field: 'paymentDate',
          label: ' 付款日期'
        },{
          field: 'delayDays',
          label: '滞纳天数'
        }, {
          field: 'remark',
          label: '合同备注'
        }],

        tableContentwyf:[{
          field: 'periods',
          label: '期数'
        }, {
          field: 'startDate',
          label: '开始日期'
        }, {
          field: 'endDate',
          label: '结束时间',
        }, {
          field: 'fee',
          label: '租金'
        }, {
          field: 'payDeadline',
          label: ' 付款要求'
        },{
          field: 'paymentCycle',
          label: '付款周期'
        }, {
          field: 'paymentStatus',
          label: '付款状态'
        }, {
          field: 'paymentDate',
          label: ' 付款日期'
        },{
          field: 'delayDays',
          label: '滞纳天数'
        }, {
          field: 'remark',
          label: '合同备注'
        }],
        columnDatabzj: [],
        columnDatazj: [],
        columnDatawyf: [],
        customWidth: '',

        room:{},
        rentalFee:{},
        contract:{},
      }
    },
    watch: {},
    methods: {
     /* changeUserStatus: function (id, enable) {
        pageApi.changeEnable(id, enable).then((res) => {
          this.handleMessage(res)
          if (res.code === '200') this.getData()
        })
      },*/
      onSubmit() {
        let form = this.form
        let dialogType = this.dialogType
        form.duration = form.durationTime + (form.productTypeId == 1 ? '个月' : '天')
        form.enable = Number(form.enable)
        this.$refs['form'].validate((valid) => {
          if (valid) {
            switch (dialogType) {
              case 'add':
                this.dialogTitle = '添加'
                pageApi.create(form).then(res => {
                  this.handleRes(res)
                })
                break
              case 'update':
                this.dialogTitle = '编辑'
                pageApi.update(form).then(res => {
                  this.handleRes(res)
                })
                break
            }
          }
        })
      },
      handleRes(res) {
        this.handleMessage(res)
        if (res.code === '200') {
          this.dialogVisible = false
          this.getData()
        }
      },

      editBtnClick(val, type) {
        switch (type) {
          case 'view':

            this.dialogType = type
            this.dialogVisible = true
            break
          case 'contractDetail':
            this.changeUserStatus(val.courseProductId, val.enable ? 0 : 1)
            break
          case 'valueAdd':
            this.changeUserStatus(val.courseProductId, val.enable ? 0 : 1)
            break
          case 'delete':
            this.changeUserStatus(val.courseProductId, val.enable ? 0 : 1)
            break
        }
      },
      handleClose(done) {
        let resetForm = {
          costAmount: '',
          courseProductId: '',
          duration: '',
          durationTime: '',
          enable: true,
          intro: '',
          memo: '',
          productName: '',
          saleAmount: '',
          sort: '',
          tag: ''
        }
        this.form = Object.assign({}, this.form, resetForm)
        done()
      },
      getById(id){
        pageApi.getById(id).then(res => {
          let data = res.body
          this.room = data.ctobRoomVO
          this.rentalFee = data.rentalFee
          this.contract = data.contract
          this.securityFee = data.rentalFee.securityFee

          this.columnDatabzj = [data.rentalFee.securityFee]
          this.columnDatazj = data.rentalFee.rent
          this.columnDatawyf = data.propertyFee
        })
      },

    },
    mounted() {
      let {id} = this.$route.query
      this.getById(id)
    }
  }
</script>

<style lang="scss" scoped>
  .p-style{
    font-pageSize: 14px;
  }
.box-card{
  margin-top: 10px;
  .box-card-h{
    font-size: 16px;
    font-weight: 500;
  }
}
</style>
